<template>
  <div class="vertical-layout-container">
    <!-- 左侧快捷筛选区（可收起/展开） -->
    <div class="common-search-space" :class="{ collapsed: isSearchCollapsed }">
      <div class="search-toggle">
        <el-button link text class="filter"> 筛选条件 </el-button>
      </div>
      <!-- 筛选内容，竖向排列 -->
      <div class="search-filters">
        <slot name="filters"></slot>
      </div>
    </div>
    <div class="vertical-layout">
      <!-- 头部 -->
      <div class="header">
        <slot name="header"></slot>
      </div>

      <!-- 搜索区域：包含可收起的左侧筛选 + 其他搜索内容 -->
      <div class="search-section">
        <!-- 其他搜索内容（如输入框、按钮等） -->
        <div class="search-content">
          <slot name="search"></slot>
        </div>
      </div>

      <!-- 表格区域 -->
      <div class="table-section">
        <slot name="table"></slot>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'VerticalLayout',
  props: {
    isSearchCollapsed: {
      type: Boolean,
      default: false
    },
    // 匹配范围字段
    showMatchRange: {
      type: Boolean,
      default: true
    },

    otherFields: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {};
  },
  methods: {
    toggleSearch() {
      this.isSearchCollapsed = !this.isSearchCollapsed;
    }
  }
};
</script>

<style lang="scss">
.vertical-layout-container {
  height: 100%;
  display: flex;
  width: 100%;
}

.vertical-layout {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%; /* 可根据需要调整 */
  gap: 10px;
  overflow: hidden;
}

/* 搜索区域：左右结构（筛选 + 内容） */
.search-section {
  display: flex;
  padding: 0 10px;
}

/* 左侧快捷筛选区 */
.common-search-space {
  width: 0;
  border-radius: 3px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: width 0.3s ease;
  border-right: none;
  flex-shrink: 0;

  // 搜索标题
  .search-toggle {
    height: 40px;
    width: 100%;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    cursor: pointer;
    // 不换行
    white-space: nowrap;
    border-bottom: 1px solid rgb(228, 228, 228);

    .filter {
      font-size: 16px;
    }
  }

  .search-filters {
    * {
      white-space: nowrap;
    }
  }
}

.collapsed {
  padding-right: 10px;
  width: auto;
  transition: width 0.3s ease;
  border-right: 2px solid rgb(228, 228, 228);
}

/* 筛选内容区域 */
.search-filters {
  flex: 1;
  padding: 8px 0 0 0;
  font-size: 13px;
}

.search-filters .filter-item {
  margin-bottom: 1px;
}

.search-filters .filter-item:last-child {
  margin-bottom: 0;
}

/* 右侧搜索内容（原 search 插槽内容） */
.search-content {
  flex: 1;
  min-width: 0; /* 防止内容溢出 */
}

/* 表格区域 */
.table-section {
  flex: 1;
  padding: 0 10px;
  overflow: auto;
}
</style>
